<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="false">
			<template #search>
				<div class="opt-item">

				</div>
			</template>
			<template #add>
				<div class="opt-item">
					<el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">
						添加屏保</el-button>
				</div>
			</template>
		</basic-opt>

		<div class="table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="title" label="屏保名称"></el-table-column>
				<el-table-column prop="images" label="屏保图片" width="500px">
					<template #default="scope">
						<div style="display: flex;flex-wrap: wrap;">
							<div v-for="(item,index) in scope.row.images" :key="index">
								<div style="margin: 0 20px;">
									<el-popover placement="left" title="" trigger="click">
										<img :src="item" style="max-width:800px; max-height:800px;" />
										<template #reference>
											<img :src="item" style="max-width:50px;max-height:50px;">
										</template>
									</el-popover>
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="created_at" label="创建日期"></el-table-column>
				<el-table-column fixed="right" label="操作" width="400">
					<template #default="scope">
						<el-button @click="onReleaseVersion(scope.row)" type="primary" size="mini">发布
						</el-button>
						<!-- <el-button @click="copyVersionLink(scope.row)" type="success" plain size="mini">
							复制链接
						</el-button> -->
						<el-button @click="onDelData(scope.row)" type="danger" plain size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<page-component @pageChanged="onPageChanged"></page-component>
		</div>

		<!-- 添加屏保 -->
		<compoment-drawer :drawer_name="drawer_name" :drawer_form="drawer_form" @getDrawerForm="getDrawerForm">
			<el-form ref="form" :model="form" label-width="120px">
				<el-scrollbar v-loading="form_loading" element-loading-spinner="el-icon-loading"
					element-loading-text="正在进行请求,请稍后" height="80vh">
					<div class="form-flex">
						<el-form-item label="屏保描述" prop="title">
							<el-input v-model="form.title" placeholder="请输入屏保描述" class="w-ipt"></el-input>
						</el-form-item>
						<el-form-item label="屏保备注" prop="remark">
							<el-input v-model="form.remark" placeholder="请输入屏保备注" class="w-ipt"></el-input>
						</el-form-item>
						<el-form-item label="上传屏保照片" prop="images">
							<more-qiniu-upload :images="form.images"  ref="refMoreQiniuUpload" @getImages="getImages">
							</more-qiniu-upload>
						</el-form-item>
					</div>
				</el-scrollbar>
				<submit-reset @getChildNewForm="getNewForm" @getChildResetForm="resetForm('form')">
				</submit-reset>
			</el-form>
		</compoment-drawer>

		<!-- 发布屏保 -->
		<compoment-drawer :drawer_name="drawer_fabu_name" :drawer_form="drawer_fabu_form"
			@getDrawerForm="getDrawerFabuForm">
			<el-form ref="release_form" :model="release_form" label-width="120px" label-position="top">
				<el-scrollbar height="80vh" v-loading="fabu_form_loading" element-loading-text="正在进行请求,请稍后"
					element-loading-spinner="el-icon-loading">
					<div>
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="是否启用屏保">
									<el-radio-group v-model="release_form.enable">
										<el-radio :label="0">禁用</el-radio>
										<el-radio :label="1">启用</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="18">
								<el-form-item label="是否保持屏保模式">
									<el-radio-group v-model="release_form.stay">
										<el-radio :label="0">不保持</el-radio>
										<el-radio :label="1">保持</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="8">
								<el-form-item label="屏保切换时间">
									<el-input-number v-model="intervalTime" @change="intervalTimeChange"
										style="width: 100%;">
									</el-input-number>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="人离开后进入屏保的时间">
									<el-input-number v-model="leaveTime" @change="leaveTimeChange" style="width: 100%;">
									</el-input-number>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="屏保时间">
									<el-time-picker v-model="screenTime" :value-format="timeScreen"
										end-placeholder="屏保结束时间" is-range placeholder="选择时间范围" range-separator="至"
										start-placeholder="屏保开始时间" @change="screenTimeChange" style="width: 100%;">
									</el-time-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="选择推送类型">
							<el-select v-model="release_form.push_type" placeholder="请选择推送类型"
								@change="releaseTypeChange" style="width: 100%;">
								<el-option v-for="(item, index) in release_type_list" :key="index" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-if="release_form.push_type == 2" label="选择地址" prop="addresses">
							<address-component v-if="release_form.push_type == 2" ref="refAddressComponent"
								:parent_addresses="release_form.params" @getAddresses="getAddresses">
							</address-component>
						</el-form-item>

						<el-form-item v-if="release_form.push_type == 3" label="选择设备">
							<uuid2-component ref="refUuidComponent" v-if="release_form.push_type == 3"
								:parent_uuid="release_form.params" @getUUID="getUuid"></uuid2-component>
						</el-form-item>

						<el-form-item v-if="release_form.push_type == 4" label="选择社区">
							<area2-component v-if="release_form.push_type == 4" :area_id="release_form.params"
								@getAreaId="getAreaId">
							</area2-component>
						</el-form-item>
					</div>
				</el-scrollbar>
				<submit-reset @getChildNewForm="getNewFabuForm" @getChildResetForm="getResetFubuForm('release_form')">
				</submit-reset>
			</el-form>
		</compoment-drawer>

		<!-- 删除数据确认 -->
		<delete-data :del_data_dialog="del_data_dialog" @getDelData="getDelData" @getCancelDelData="getCancelDelData">
			<el-descriptions class="margin-top" :column="1" size="medium" border>
				<el-descriptions-item>
					<template #label>
						id
					</template>
					{{delData.id}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						屏保名称
					</template>
					{{delData.title}}
				</el-descriptions-item>
			</el-descriptions>
		</delete-data>
	</div>
	<!--  mobile  -->
	<!-- 	<div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求"
		element-loading-spinner="el-icon-loading">
		<div class="mobile-search-box">
			<el-select v-model="apk_id" @change="apkIdChanged" filterable placeholder="请输入选择固件" size="medium">
				<el-option v-for="(item,index) in apk_id_list" :key="index" :label="item.name" :value="item.id">
					<span>id:{{ item.id }} - {{item.name}}</span>
				</el-option>
			</el-select>
		</div>
		<div class="moblie-table-box" v-if="apk_id">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="apk_id" label="apk_id"></el-table-column>
				<el-table-column prop="version" label="版本"></el-table-column>
				<el-table-column prop="href" label="版本链接" width="500"></el-table-column>
				<el-table-column prop="created_at" label="创建日期"></el-table-column>
			</el-table>
		</div>
		<page-component v-if="apk_id" @pageChanged="onPageChanged"></page-component>
	</div> -->
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'
	import AddressComponent from '@/components/form/address-component.vue'
	import Uuid2Component from '@/components/form/uuid2-component.vue'
	import MoreQiniuUpload from '@/components/form/more-qiniu-upload'
	import Area2Component from '@/components/form/area2-component.vue'


	export default {
		mixins: [mixin],
		name: 'version',
		components: {
			AddressComponent,
			Uuid2Component,
			MoreQiniuUpload,
			Area2Component
		},
		data() {
			return {
				apk_id: '',
				apk_id_list: [],
				// 表单
				drawer_name: '添加固件版本',
				form_loading: false, // 表单填写时加载
				form: {
					title: '',
					remark: '',
					images: [],
				},

				// 发布版本
				drawer_fabu_name: '发布版本', // 发布版本
				drawer_fabu_form: false,
				fabu_form_loading: false,
				screenTime: '',
				timeScreen: 'HH:mm', // 时间格式
				intervalTime: 0, // 间隔时间
				leaveTime: 0,

				release_form: {
					saver_id: '',
					push_type: '',
					enable: 0,
					stay: 0,
					interval_time: '',
					start_time: '',
					display_time: '',
					params: [],
				},
				release_type_list: [{
					value: 1,
					label: '全部设备推送'
				}, {
					value: 2,
					label: '按地址推送'
				}, {
					value: 3,
					label: '自定义推送'
				}, {
					value: 4,
					label: '按地区推送'
				}], // 发布类型
				project_id: '',
				// 设备方向
				direction_val: '',

			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {
						apk_id: self.apk_id ? self.apk_id : '0'
					}
					self.addPageInfo(params)
					let res = await API.getScreensaver(params.pageNumber, params.pageSize, params.title)
					self.loading = false;
					self.onGotPageData(res)
				} catch (err) {
					self.loading = false;
				}
			},

			// 确定删除数据
			submitDeleteData(val) {
				let self = this;
				API.delScreenSaver(val).then(res => {
					console.log(res)
					self.getData();
					self.delSuccess();
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},

			// 获取上传的所有屏保图片
			getImages(data) {
				let self = this;
				self.form.images = data.imagesList;
				console.log(self.form.images)
			},

			// 提交表单
			getNewForm() {
				let self = this;
				self.$refs.refMoreQiniuUpload.$refs.upload.submit();
				if (self.form.images.length > 0) {
					API.screenSaver(self.form).then(res => {
						console.log(res)
						self.submitSuccess();
						self.drawer_form = false;
						self.form_loading = false;
						self.getData();
						self.initForm();
					}).catch(err => {
						self.form_loading = false;
						self.$message.error(err.response.data.message);
					});
				} else {
					self.$message.error('请上传屏保图片');
				}
			},
			// 初始表单
			initForm() {
				let self = this;
				self.form = {
					title: '',
					remark: '',
					images: [] // 部门等级
				};
				self.$refs.refMoreQiniuUpload.$refs.upload.clearFiles();
			},

			// 发布版本
			onReleaseVersion(row) {
				let self = this;
				self.drawer_fabu_form = true;
				self.release_form.saver_id = row.id;
			},

			getDrawerFabuForm(data) {
				let self = this;
				self.drawer_fabu_form = data.child_drawer_form;
				self.initFubuForm();
			},
			// 初始表单
			initFubuForm() {
				let self = this;
				self.release_form.push_type = '';
				self.release_form.enable = 0;
				self.release_form.stay = 0;
				self.release_form.interval_time = '';
				self.release_form.start_time = '';
				self.release_form.display_time = '';
				self.release_form.params = [];

				self.screenTime = '';
				self.timeScreen = 'HH:mm'; // 时间格式
				self.intervalTime = 0; // 间隔时间
				self.leaveTime = 0;

			},

			// 屏保间隔时间
			intervalTimeChange(val) {
				var self = this;
				self.release_form.interval_time = val;
			},

			leaveTimeChange(val) {
				var self = this;
				self.release_form.start_time = val;
			},

			screenTimeChange(val) {
				var self = this;
				self.release_form.display_time = val[0] + '-' + val[1];
			},

			// 选择发布类型
			releaseTypeChange(val) {
				let self = this;
				self.release_form.params = [];
				switch (val) {
					case 1:
						self.release_form.push_type = 1;
						break;
					case 2:
						self.release_form.push_type = 2;
						break;
					case 3:
						self.release_form.push_type = 3;
						break;
					case 4:
						self.release_form.push_type = 4;
				}
			},

			getAddresses(data) {
				let self = this;
				self.release_form.params = data.addresses;
			},

			// 获取UUID
			getUuid(data) {
				let self = this;
				self.release_form.params = data.uuidList;
			},

			getAreaId(data) {
				let self = this;
				self.release_form.params = data.area_id;
			},

			// 提交
			getNewFabuForm() {
				let self = this;
				self.fubu_form_loading = true;
				console.log(self.release_form)
				API.pushScreen(self.release_form).then(res => {
					console.log(res)
					self.submitSuccess();
					self.drawer_fabu_form = false;
					self.fubu_form_loading = false;
					self.getData();
					self.initFubuForm();
				}).catch(err => {
					self.fubu_form_loading = false;
					self.$message.error(err.response.data.message);
				});
			},
			getResetFubuForm(formName) {
				let self = this;
				self.$refs[formName].resetFields();
				self.initFubuForm();
			},
		},
		beforeUnmount() {
			localStorage.removeItem('apk_id');
		}
	}
</script>
